<template>
<div class="detail">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in gallery" :key="item.id">
            <img :src="item.img_url" alt="" width="100%" style="display:block;">
        </van-swipe-item>
    </van-swipe>
    <Tips></Tips>
    <!-- 商品信息 -->
    <div class="info">
        <div class="title">{{info.name}}</div>
        <div class="goods_brief">{{info.goods_brief}}</div>
        <div class="retail_price">{{info.retail_price | RMBfilter}}</div>
    </div>
    <van-cell title="展示弹出框" is-link @click="skuShow = true"/>
    <van-sku
        ref="sku"
        v-model="skuShow"
        :sku="sku"
        :goods="goods"
        @add-cart="onAddCartClicked"
        @buy-clicked="onBuyClicked"
    />

    <!-- 商品参数 -->
    <div class="attribute">
        <h3>商品参数</h3>
        <ul>
            <li v-for="(item,index) in attribute" :key="index">
                <div class="l">{{item.name}}</div>
                <div class="r van-ellipsis">{{item.value}}</div>
            </li>
        </ul>
    </div>
    <!-- 图片 -->
    <div class="goods_desc" v-html="goods_desc"></div>
    <!--issue-->
    <div class="title">
        <div class="line"></div>
        <div class="text">常见问题</div>
    </div>
    <div class="issue">
        <ul>
            <li v-for="item in issue" :key="item.id">
                <h3>{{item.question}}</h3>
                <p>{{item.answer}}</p>
            </li>
        </ul>
    </div>
    <!--相关产品-->
    <div class="title">
        <div class="line"></div>
        <div class="text">相关产品</div>
    </div>
    <div class="DetailsProductList">
        <Products :productsList="newGoodsList"></Products>
    </div>
    <AppGoodsActive @addCart="addCart" :goodsCount="goodsCount"></AppGoodsActive>
</div>
</template>

<script>
import Tips from '../../components/Tips.vue'
import AppGoodsActive from '../../components/AppGoodsActive.vue'
import Products from '../../components/Products.vue'
export default {
    data() {
        return {
            skuShow:false,
            sku: {
                tree:[],
                hide_stock: false,
                price: '0', // 默认价格（单位元）
                stock_num: 0, // 商品总库存
            },
            goods: {
                picture: ''
            },
            gallery: [],
            info: {},
            attribute: [],
            goods_desc: '',
            issue: [],
            newGoodsList:[],
            goodsCount:0,
            productList:[]
        }
    },
    components: {
        Tips,
        AppGoodsActive,
        Products
    },
    created() {
        this.getDataList()
        this.getGoodsRelated()
        this.getCartCount()
    },
    methods: {
        onBuyClicked(){
            this.$toast.loading('功能未开发')
        },
        async getDataList() {
            let id = this.$route.query.id
            const res = await this.$http.get('goods/detail', {
                params: {
                    id: id
                }
            })
            const {
                gallery,
                info,
                attribute,
                issue,
                productList
            } = res.data.data
            if (res.data.errno == 0) {
                this.gallery = gallery
                this.info = info
                this.goods_desc = info.goods_desc
                this.attribute = attribute
                this.issue = issue
                this.goods.picture = info.list_pic_url
                this.sku.price = info.retail_price
                this.sku.stock_num = info.goods_number
                this.productList = productList
            }

        },
        async getGoodsRelated(){
            let id = this.$route.query.id
            const res = await this.$http.get('goods/related',{params:{id:id}})
            if(res.data.errno == 0){
                this.newGoodsList = res.data.data.goodsList
            }
        },
        async getCartCount(){
            const res = await this.$http.get('/cart/goodscount')
            if(res.data.errno == 0){
                this.goodsCount = res.data.data.cartTotal.goodsCount
            }
        },
        addCart(){
            this.skuShow = true
        },
        async onAddCartClicked(){
            let number = this.$refs.sku.getSkuData().selectedNum
            let goodsId = this.$route.query.id
            let productId = this.productList[0].id
            const res = await this.$http.post('/cart/add',{goodsId:goodsId,productId:productId,number:number})
            console.log(res);
            if(res.data.errno == 0){
                this.$toast.success('添加购物车成功！')
                this.$router.push('/cart')
            }
        }
    }
}
</script>

<style lang="less" scoped>
.info {
    background-color: #fff;
    text-align: center;
    line-height: .4rem;
    padding: .1rem 0;
    border-bottom: 1px solid #ccc;

    .title {
        font-size: .2rem;
    }

    .retail_price {
        color: darkred;
    }
}

.attribute {
    background-color: #fff;
    margin-top: .2rem;
    padding: .1rem .168rem;

    h3 {
        font-size: .1638rem;
        line-height: .5rem;
    }

    li {
        height: .4rem;
        line-height: .4rem;
        background-color: #efefef;
        display: flex;
        margin-bottom: .1rem;
        border-radius: .5rem;

        .l {
            width: 30%;
            text-align: right;
            margin-right: .1rem;
            font-size: .12rem;
        }

        .r {
            flex: 1;
            font-size: .13rem;
        }
    }
}

// 穿透ui组件的样式，直接添加在标签上
/deep/.goods_desc {
    img {
        width: 100%;
        display: block;
    }
}

.title {
    height: 40px;
    background-color: #fff;
    width: 100%;
    position: relative;

    .line {
        width: 54%;
        height: 2px;
        background-color: #ccc;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    .text {
        position: absolute;
        background-color: #fff;
        font-size: 16px;
        width: 28%;
        height: 30px;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        text-align: center;
        margin-top: 10px;
        /* align-items: center; */
    }
}

.issue {
    margin-bottom: 20px;
    padding: 10px 0;
    background-color: #fff;

    ul {
        margin-bottom: 20px;

        li {
            padding: 0 20px;

            h3 {
                padding: 12px 0;
                position: relative;

                /* 小圆点 */
                &::before {
                    content: "";
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background: darkred;
                    position: absolute;
                    left: -10px;
                    top: 50%;
                    margin-top: -2px;
                }
            }

            p {
                font-size: 12px;
                color: #999;
            }
        }
    }
}
.DetailsProductList{
    background-color: #fff;
}
</style>
